<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    </head>
    <body>
        <button id="btn1">btn1</button>
        <button id="btn2">btn2</button>
        <button id="btn3">btn3</button>
        <button id="btn4">btn4</button>
        <div id="div1">我是div</div>

        <ul id="ul1">
            <li id="li1">li1
                <button id="btn5">btn5</button>
            </li>
            <li id="li2">li2</li>
            <li id="li3">li3 <span id="spn1">spn1</span></li>
            <li id="li4">li4</li>
            <span id="spn2">spn2</span>
        </ul>
        <ul id="ul2">
            <li id="li4">点我 <input type="checkbox" name="" id=""> </li>
            <li id="li5"><input type="text" name="" id="" value="找我啊"></li>
            <li id="li6"><input type="text" name="" id=""></li>
            <li id="li7"><input type="text" name="" id=""></li>
        </ul>

        <div id="div0">div0</div>
        <div id="divEnd">divEnd</div>

        1<input type="checkbox" name="newsletter" value="Hot Fuzz" />
        2<input type="checkbox" name="newsletter" value="Cold Fusion" />
        3<input type="checkbox" name="accept" value="Evil Plans" />
        <br>
        <hr>

        <input type="text" name="newsletter" />
        <input type="text" name="milkman" value="abc" />
        <input type="text" name="newsboy" />


        <script>
            $(function() {

                //基本选择器, 根据id, class, 元素来直接就能选的
                //选择all button和div 元素    
                $("button, div").css({
                    "background": "red",
                    "color": "white"
                });


                //层次选择器
                // 选择ul下 的 子孙 span 
                $("ul span").css({
                    "background": "green",
                    "color": "white"
                });
                //选择Ul下 的 子li 下的 子button
                $("#ul1>li>button").css({
                    "background": "green",
                    "color": "white"
                });
                // 选择 id为li1 的下一个li , 我不知道下一个li有什么属性, 我只知道要下一个
                $("#li1 +li").css({
                    "background": "green",
                    "color": "white"
                });
                //选择li5之后的li 兄弟下的input , so 实现一个功能方法多的很
                $("#ul2 #li5~* input").css({
                    "background": "green",
                    "color": "white"
                });

                //过滤选择器
                //选择第一个div, : 代表过滤, 过滤选择器的标志(像一张过滤网似的)
                $("div:first").css({
                    'background': "red"
                });


                //选择最后一个div
                $("div:last").css({
                    'background': "green"
                });

                //把name 属性是accept 的 元素勾选上
                $("input[name='accept']").attr("checked", true);


                //查找所有 name 以 'news' 开始的 input 元素
                $("input[name^='news']").css({
                    'background': "purple"
                });
                //查找所有 name 以 'letter' 结尾的 input 元素
                $("input[name$='man']").css({
                    'background': "grey"
                });
                //查找所有 name 包含 'man' 的 input 元素
                $("input[name*='man']").css({
                    'color': "red"
                });
                //使用has方法超快筛选第二个ul 下的有文本的li ???????
                //找文本不为空的input:text 
                console.log(  $(":text[value!='']")  );
                
                $(":text").last().val("我是最后一个");
                $(":text").eq(1).val("我是第二个");
                
             //   console.log( $("ul:eq(1) >li").has("input[value!='']")   );
                

            })
        </script>
    </body>
</html>
